<template>
  <div class="topNav">
    <div class="navLeft">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-31liebiao"></use>
      </svg>
    </div>
    <div class="navCenter">
      <span class="navItem" @click="router.push('/me')">我的</span>
      <span class="navItem active">发现</span>
      <span class="navItem">云付</span>
      <span class="navItem">视频</span>
    </div>
    <div class="navRight" @click="toSearch">
      <svg class="icon search" aria-hidden="true">
        <use xlink:href="#icon-sousuo1"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
export default {
  name: 'TopNav',
  setup() {
    let router = useRouter()
    let toSearch = () => {
      console.log(router);
      router.push({
        path: '/search',
      })
    }
    return {
      router,
      toSearch,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.topNav {
  width: calc(100%-0.4rem);
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 0.2rem;
  .icon {
    width: 0.5rem;
    height: 0.5rem;
  }
  .search {
    width: 0.4rem;
    height: 0.4rem;
  }
  .navCenter {
    width: 4.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .navItem {
      flex: 1;
      text-align: center;
      font-family: '微软雅黑';
    }
    .active {
      font-weight: 900;
    }
  }
}
</style>
